<template>
  <div class="input-box">
    <div
      class="input-label"
      :style="{
        width: labelWidth,
        textAlign: align,
      }"
    >
      <span v-if="field.is_must">*</span>
      {{ field.title || "" }}
    </div>
    <!-- 输入框 -->
    <div class="input-value" v-if="field.types == 0">
      <el-input
        v-model="field.value"
        :placeholder="field.config.placeholder || '请输入'"
        style="width: 100%"
        clearable
        @change="changeValue"
      />
    </div>
    <!-- 文本域 -->
    <div class="input-value" v-if="field.types == 1">
      <el-input
        v-model="field.value"
        :placeholder="field.config.placeholder || '请输入'"
        style="width: 100%"
        type="textarea"
        clearable
        @change="changeValue"
      />
    </div>
    <!-- 下拉框 -->
    <div class="input-value" v-if="field.types == 2">
      <el-select
        v-model="field.value"
        placeholder="请选择"
        clearable
        filterable
        style="width: 100%"
        @change="changeValue"
      >
        <el-option
          v-for="(i, k) in field.config.options"
          :key="k"
          :value="i.label"
          :label="i.label"
        />
      </el-select>
    </div>
    <!-- 下拉框 多选 -->
    <div class="input-value" v-if="field.types == 3">
      <el-select
        v-model="field.value"
        style="width: 100%"
        multiple
        placeholder="请选择"
        clearable
        filterable
        @change="changeValue"
      >
        <el-option
          v-for="(i, k) in field.config.options"
          :key="k"
          :value="i.label"
          :label="i.label"
        />
      </el-select>
    </div>
    <!-- 表格 -->
    <div class="input-value" v-if="field.types == 4">
      <el-table :data="field.value" border style="width: 100%">
        <el-table-column
          v-for="(i, k) in field.config.options"
          :key="k"
          :prop="i.label"
          :label="i.label"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row[i.label]" @change="changeValue" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <i class="el-icon-remove" @click="handleDelTable(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
      <flexbox justify="center">
        <i class="el-icon-circle-plus" @click="handleAddTable" />
      </flexbox>
    </div>
    <!-- 日期 -->
    <div class="input-value" v-if="field.types == 5">
      <el-date-picker
        v-model="field.value"
        style="width: 100%"
        :type="field.config.unit || 'date'"
        :value-format="
          field.config.unit == 'year'
            ? 'yyyy'
            : field.config.unit == 'month'
            ? 'yyyy-MM'
            : 'yyyy-MM-dd'
        "
        clearable
        placeholder="请选择日期"
        @change="changeValue"
      />
    </div>
    <!-- 日期范围 -->
    <div class="input-value" v-if="field.types == 6">
      <el-date-picker
        v-model="field.value"
        style="width: 100%"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        clearable
        @change="changeValue"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: "CrmConfirmForm",
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 标签宽度
    labelWidth: {
      type: String,
      default: "90px",
    },
    // 标签对齐方式
    align: {
      type: String,
      default: "right",
    },
  },
  data() {
    return {
      field: {},
    };
  },

  mounted() {
    this.field = Object.assign({}, this.value);
    console.log(this.field);
    if (this.field.types == 4) {
      console.log(this.field);
      if (this.field.value && this.field.value.length > 0) {
      } else {
        this.field.value = [];
      }
    }
  },

  methods: {
    // 改变值
    changeValue() {
      this.$emit("change", this.field);
    },
    // 新增表格
    handleAddTable() {
      let list = this.field.config.options;
      let obj = {};
      list.forEach((i) => {
        obj[i.label] = "";
      });
      this.field.value.push(obj);
      this.changeValue();
    },
    // 删除表格
    handleDelTable(index) {
      this.field.value.splice(index, 1);
      this.changeValue();
    },
  },
};
</script>

<style lang="scss" scoped>
.input-box {
  display: flex;
  margin-bottom: 20px;
  .input-label {
    margin-right: 10px;
    padding: 8px 0;
    span {
      color: #f00;
    }
  }
  .input-value {
    flex: 1;
    .el-icon-remove {
      font-size: 26px;
      color: #f56c6c;
      &:hover {
        cursor: pointer;
        color: #f57a7a;
      }
    }
    .el-icon-circle-plus {
      font-size: 26px;
      color: #409eff;
      &:hover {
        cursor: pointer;
        color: #53a8fc;
      }
    }
  }
}
</style>
